<template>
  <div class="container">
    <van-toast id="van-toast" />
    <div class="userInfo">
      <img :src="userInfo.avatarUrl">
      <!-- <img src="https://wx.qlogo.cn/mmopen/vi_32/g6BukNs0SERYntoVSNvtNMBbwiaJEaohUefePJQibhAKxicONnw4Wu8d1E57jiacA79jYE9bRlxU5FPwOMhMdrnL7g/132"> -->
      <p class="userName">{{userInfo.nickName}}</p>
      <van-button
        open-type="getUserInfo"
        type="default"
        size="normal"
        round
        @click="loginUser"
        v-if="userInfoFlag"
      >كىرىش</van-button>

      <div
        class="my"
        v-show="myFlag"
      >
        <span
          class="order"
          @click="enterMyOrder"
        >
          <i-icon
            type="activity"
            size="28"
            color="#80848f"
          />
          <p class="orderInfo">مېنىڭ زاكاسلىرىم</p>
          <p class="xsj">
            <i-icon
              type="enter"
              size="20"
              color="#80848f"
            />
          </p>
        </span>
        <span
          class="order"
          @click="toRedPacket"
        >
          <i-icon
            type="coupons"
            size="28"
            color="#80848f"
          />
          <p class="orderInfo">قىزىل بولاق</p>
          <p class="xsj">
            <i-icon
              type="enter"
              size="20"
              color="#80848f"
            />
          </p>
        </span>
        <span
          class="order"
          @click="enterToAbout"
        >
          <i-icon
            type="tasklist"
            size="28"
            color="#80848f"
          />
          <p class="orderInfo">بىز ھەققىدە</p>
          <p class="xsj">
            <i-icon
              type="enter"
              size="20"
              color="#80848f"
            />
          </p>
        </span>
        <span class="order">
          <button
            class="feedback"
            open-type="contact"
            :contact="concat"
          ></button>
          <i-icon
            type="customerservice"
            size="28"
            color="#80848f"
          />
          <p class="orderInfo">تەكلىپ بېرىڭ</p>
          <p class="xsj">
            <i-icon
              type="enter"
              size="20"
              color="#80848f"
            />
          </p>
        </span>
      </div>
      <!-- <YearProgress /> -->
    </div>
  </div>
</template>
<script>
import qcloud from "wafer2-client-sdk";
import config from "@/config";
import { get } from "@/util";
import Toast from "../../../static/Vant/toast/toast";
export default {
  onShow() {},
  data() {
    return {
      myFlag: false,
      userInfoFlag: false,
      phoneNumberFlag: false,
      userInfo: {
        avatarUrl: "../../static/img/tabbar/avatar.png",
        nickName: ""
      }
    };
  },
  methods: {
    loginUser() {
      wx.showLoading();
      let user = wx.getStorageSync("userInfo");
      const _this = this;
      if (!user) {
        _this.userInfoFlag = true;
        qcloud.setLoginUrl(config.loginUrl);
        qcloud.login({
          success: function(userInfo) {
            // console.log("登录成功", userInfo);
            Toast.success("كىرىش تامام");
            wx.hideLoading();
            _this.userInfoFlag = false;
            _this.myFlag = true;
            wx.setStorageSync("userInfo", userInfo);
            _this.userInfo = userInfo;
          },
          fail: function(err) {
            console.log("登录失败", err);
            wx.hideLoading();
            Toast.fail("مەغلۇپ بولدى");
          }
        });
      }
    },
    enterMyOrder() {
      wx.navigateTo({ url: "/pages/MyOrder/main" });
    },
    enterToAbout() {
      wx.navigateTo({ url: "/pages/About/main" });
    },
    toRedPacket() {
      wx.navigateTo({ url: "/pages/RedPacket/main" });
    },
    concat(e) {
      console.log(e);
    }
  },
  onReady() {
    wx.setNavigationBarTitle({ title: "مېنىڭ" });
    let userInfo = wx.getStorageSync("userInfo");
    if (userInfo) {
      this.myFlag = true;
      this.userInfoFlag = false;
      this.userInfo = userInfo;
    } else {
      this.myFlag = false;
      this.userInfoFlag = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  padding: 0 30rpx;
  .userInfo {
    text-align: center;
    margin-top: 40rpx;
    .userName {
      color: #c6c6c6;
      font-size: 45rpx;
      margin-bottom: 50rpx;
    }
    img {
      border: #fafafa solid 12rpx;
      border-radius: 50%;
      width: 150rpx;
      height: 150rpx;
      margin: 20rpx;
    }
  }
  .my {
    width: 90%;
    margin: 0 auto;
    .order {
      text-align: left;
      font-size: 12px;
      display: inline-block;
      width: 100%;
      padding-bottom: 12rpx;
      border-bottom: #ebebeb solid 1px;
      margin-bottom: 30rpx;
      .orderInfo {
        display: inline;
        font-size: 31rpx;
        margin-left: 33rpx;
        color: #333;
      }
      .xsj {
        padding-top: 12rpx;
        float: right;
        margin-right: -6rpx;
        // display: inline;
      }
      .feedback {
        visibility: hidden;
      }
    }
  }
}
</style>
